// 主题色设计

// 全局颜色
@global: {
    // 主题色
    default: #fff;
    primary: #2177b8; // 虹蓝
    success: #55bb8a; // 麦苗绿
    warning: #fccb16; // 素馨黄
    danger: #fa5d19; // 莓浆红
    info: #909399;
    text: #303133;
    border: #ebeef5;
    background: #f0f2f5;
    disabled: #c0c4cc;
    placeholder: #c0c4cc;
}

@default: #fff;
@default1: #F9F9F9;
@primary: #2177b8; // 虹蓝
@primary-hover: #1a5d8c;
@success: #55bb8a; // 麦苗绿
@success-hover: #3d9e6b;
@warning: #fccb16; // 素馨黄
@warning-hover: #e0b500;
@danger: #fa5d19; // 莓浆红
@danger-hover: #d44a1d;
@info: #909399;
@info-hover: #82848a;
@text: #303133;
@text1: #606266;
@text2: #909399;
@text3: #afafaf;
@text-hover: #5698c3;
@border: #ebeef5;
@border1: #c0c4cc;
@border2: #666666;
@background: #f0f2f5;
@background1: #a9adb6;
@disabled: #c0c4cc;
@placeholder: #c0c4cc;
@mask: rgba(0, 0, 0, .4);

// 深色主题
#dark-theme() {
    default: #000000;
    default1: #242424;
    primary: #2177b8; // Dark Blue
    success: #008080; // Dark Teal
    warning: #ffa500; // Dark Orange
    danger: #800000; // Dark Red
    info: #333333; // Dark Gray
    text: #ffffff; // White Text
    text1: #cccccc; // Light Gray Text
    text2: #999999; // Light Gray Text
    border: #888888; // Dark Gray Border
    border1: #666666; // Dark Gray Border
    border2: #444444;
    background: #1a1a1a; // Dark Background
    background1: #242424; // Dark Background
    background2: #333333; // Dark Background
    background3: #444444; // Dark Background
    disabled: #999999; // Light Gray (Disabled)
    placeholder: #999999; // Light Gray (Placeholder)
}

@transition: all .5s ease-in-out;

#colors() {
    border-shadow: rgba(0, 0, 0, .1);
}

// 尺寸设计
@font-size-base: 16px;
// 字体
@font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;

// 字体大小rem设计  1rem = 16px
@font-size: {
    12: 0.75rem; // 12px
    14: 0.875rem; // 14px
    16: 1rem; // 16px
    18: 1.125rem; // 18px
    20: 1.25rem; // 20px
    22: 1.375rem; // 22px
    24: 1.5rem; // 24px
    28: 1.75rem; // 28px
}

// 边距 rem设计  1rem = 16px
@gap: {
    0: 0;
    2: 0.125rem; // 2px
    4: 0.25rem; // 4px
    6: 0.375rem; // 6px
    8: 0.5rem; // 8px
    10: 0.625rem; // 10px
    12: 0.75rem; // 12px
    14: 0.875rem; // 14px
    16: 1rem; // 16px
    18: 1.125rem; // 18px
    20: 1.25rem; // 20px
    22: 1.375rem; // 22px
    24: 1.5rem; // 24px
    26: 1.625rem; // 26px
    28: 1.75rem; // 28px
    30: 1.875rem; // 30px
    32: 2rem; // 32px
    34: 2.125rem; // 34px
    36: 2.25rem; // 36px
    38: 2.375rem; // 38px
    40: 2.5rem; // 40px
    42: 2.625rem; // 42px
    44: 2.75rem; // 44px
    46: 2.875rem; // 46px
    48: 3rem; // 48px
}

@direction: {
    t: top;
    r: right;
    b: bottom;
    l: left;
}

@flex-position: {
    center: center;
    start: flex-start;
    end: flex-end;
    between: space-between;
    around: space-around;
}

@position: {
    s: static;
    r: relative;
    a: absolute;
    f: fixed;
}